<template>
	<section>
		<div>
			<mt-header title="密码找回">
				<router-link to="/login" slot="left">
					<mt-button icon="back"></mt-button>
				</router-link>
			</mt-header>
			<ul v-show="!showResetPsw">
				<li class="linet lineb bgdark ml10 mr10 br4 mt10">
					<mt-field label="手机号"
					:attr="{ maxlength: 11 }"
					:state="phone&&phone.length==11?'success':'warning'"
					placeholder="请输入手机号"
					type="tel"
					v-model="phone"></mt-field>
				</li>
				<li class="lineb bgdark ml10 mr10 br4 mt10">
					<mt-field
					label="验证码"
					:attr="{ maxlength: 6 }"
					:state="yzm.length>=4?'success':'warning'"
					placeholder="输入短信验证码"
					type="text"
					v-model="yzm">
						<span @click="getMsg">
							<mt-button
							:type="phone.length==11?'primary':'default'"
							size="small">短信验证码</mt-button>
						</span>
					</mt-field>
				</li>
				<li class="ml10 mr10 mt20" @click="findBack">
					<mt-button
					size="large"
					type="primary"
					:type="phone.length==11&&yzm.length>=6?'primary':'default'">下一步</mt-button>
				</li>
				<li class="ml20 mr20 lh40 fontc3">
					如遇到问题，请在首页联系客服
				</li>
			</ul>
			<ul v-show="showResetPsw">
				<li class="bgdark ml10 mr10 br4 mt10">
					<mt-field
					label="新密码"
					:type="password.length>=6?'primary':'default'"
					placeholder="请输入新密码"
					type="password"

					v-model="password"></mt-field>
				</li>
				<li class=" bgdark ml10 mr10 br4 mt10">
					<mt-field
					label="确认密码"
					:type="passwordConfirm.length>=6?'primary':'default'"
					placeholder="请确认密码"
					type="password"

					v-model="passwordConfirm"></mt-field>
				</li>
				<li class="ml10 mr10 mt20" @click="resetPsw">
					<mt-button
					size="large"
					type="primary"
					:type="phone.length==11&&yzm.length>=6?'primary':'default'">确  定</mt-button>
				</li>
				<li class="ml20 mr20 lh40 fontc3">
					如遇到问题，请在首页联系客服
				</li>
			</ul>
		</div>
	</section>
</template>
<script>

import {MessageBox,Toast,Indicator} from 'mint-ui'

import axios from 'axios'
import MD5 from '@/tools/md5.js'
export default {
	name : "Findback",
	data () {
		return {
			phone : "",
			yzm : "",
			yzmImg : "",
			regImageCode : "",
			yzmKey : true,
			showResetPsw: false,

			password: "",
			passwordConfirm: "",
		}
	},
	created () {
	},
	methods : {
		getYzmImg () {
			 this.yzmImg = '/user/user/getRetrieveImage.do?userPhone=' + this.phone + '&_=' + new Date().getTime();
		},
		checkYzmImg () {
            Indicator.open({
                text: "请稍候...",
                spinnerType: "fading-circle"
            });
			axios({
				method: 'post',
				url: '/user/user/checkRetrieveIsTrue.do',
				params: {
					userPhone: this.phone,
					regImageCode: this.regImageCode,
				},
			}).then ((res) => {
				res = res.data;
				console.log(res);
				Toast(res.msg);
			}).then(() => {
                Indicator.close();
			})
		},
		getMsg () {
			if (this.phone.length != 11 || !this.yzmKey) {
				Toast('手机号码不正确');
				return
			};
			this.yzmKey = false;
			Indicator.open({
                text: "请稍候...",
                spinnerType: "fading-circle"
            });
			axios({
				method: 'post',
				url: '/user/user/retrievePass.do',
				params: {
					userPhone: this.phone,
					regImageCode: this.regImageCode,
				},
			}).then ((res) => {
                Indicator.close();
				res = res.data;
				//600说明图片验证码错误；
				//601需要输入验证码；
				if (res.code == 601) {
					//601时需要输入验证码
					//读取图片验证码
					MessageBox.prompt('<img src='+'/user/user/getRetrieveImage.do?userPhone=' + this.phone + '&_=' + new Date().getTime()+' height="45" width="94">', '请输入验证码')
					.then(({value,action}) => {
						//保存验证码
						console.log(value,action); //yzm 'action'
						this.regImageCode = value;
						//确认以后再次调短信接口
						this.getMsg();
					});
				}else {

				};
				Toast(res.msg);
			}).then(() => {
				this.regImageCode = "";
                Indicator.close();
				this.yzmKey = true;
			})
		},
		findBack () {
			if (this.phone.length != 11 || !this.yzmKey) {
				Toast('手机号码不正确');
				return
			};
			if (this.yzm.length != 6) {
				Toast('短信验证码不正确');
				return
			};

			this.yzmKey = false;
			Indicator.open({
                text: "请稍候...",
                spinnerType: "fading-circle"
            });
			axios({
				method: 'post',
				url: '/user/user/checkRetriveMsgCode.do',
				params: {
					userPhone: this.phone,
					msgCode: this.yzm,
				},
			}).then ((res) => {
                Indicator.close();
				res = res.data;
				if (res.code == 200) {
					MessageBox.alert(res.msg,'找回密码').then(action => {
						//达到重置密码的条件
						this.showResetPsw = true;
					});
				} else {
					MessageBox.alert(res.msg,'找回密码');
				};
			}).then(() => {
                Indicator.close();
				this.yzmKey = true;
			})
		},
		resetPsw () {
			if (this.password.length < 6) {
				Toast('密码长度须大于6位');
				return;
			};
			if (this.passwordConfirm.length < 6) {
				Toast('密码长度须大于6位');
				return;
			};
			if (this.password != this.passwordConfirm) {
				Toast('新密码 确认密码 不一致');
				return;
			};
			this.yzmKey = false;
			Indicator.open({
                text: "请稍候...",
                spinnerType: "fading-circle"
            });
			axios({
				method: 'post',
				url: '/user/user/updatePass.do',
				params: {
					userPhone: this.phone,
					userPass: MD5().hex(this.password),
				},
			}).then ((res) => {
                Indicator.close();
				res = res.data;
				if (res.code == 200) {
					MessageBox.alert(res.msg,' ').then(() => {
						this.$router.push({
							path : "/"
						})
					})
				} else {
					MessageBox.alert(res.msg,' ');
				};
			}).then(() => {
                Indicator.close();
				this.yzmKey = true;
			})
		}
	}
}
</script>